﻿@{
    ViewBag.Title = "ButtonContent";
}

<!-- Button -->
<section id="button">
    <div class="page-header">
        <h1>Button</h1>
    </div>
    <!-- Buttons -->
    <h2>Button</h2>
    <p>
        <button>Default</button>
        <button class="ui-button-primary">Primary</button>
        <button class="ui-button-success">Success</button>
        <button class="ui-button-info">Info</button>
        <button class="ui-button-warning">Warning</button>
        <button class="ui-button-danger">Danger</button>
        <button class="ui-button-inverse">Inverse</button>
        <a class="button">Anchor</a>
        <input type="submit" class="button" value="Submit">
    </p>

<pre class="prettyprint linenums">
// Button
$('button').button();
// Anchors, Submit
$('.button').button();
</pre>

    <h3>Button sizes</h3>
    <p>
        <button class="ui-button-primary ui-btn-large">Large button</button>
        <button class="ui-button ui-btn-large">Large button</button>
    </p>
    <p>
        <button class="ui-button-primary">Default button</button>
        <button class="ui-button">Default button</button>
    </p>
    <p>
        <button class="ui-button-primary ui-btn-small">Small button</button>
        <button class="ui-button ui-btn-small">Small button</button>
    </p>
    <p>
        <button class="ui-button-primary ui-btn-mini">Mini button</button>
        <button class="ui-button ui-btn-mini">Mini button</button>
    </p>

    <h3>Buttons with icons</h3>
    <p><button id="button-with-icon">Button with icon only</button></p>
    <p><button id="button-with-icon2" class="ui-button-warning">Button with icon only</button></p>
    <p><button id="button-with-icon3" class="ui-button-danger">Button with icon only</button></p>

    <h3>Block level button</h3>
    <div class="well" style="max-width: 400px; ">
        <button class="ui-button-primary btn-block">Block level button</button>
        <button class="ui-button btn-block">Block level button</button>
    </div>



    <h3>Thumbnails with buttons</h3>
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span4">
                <div class="thumbnail">
                    <img data-src="holder.js/300x200" alt="300x200">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><button class="ui-button-primary">Primary</button><button>Default</button></p>
                    </div>
                </div>
            </li>
            <li class="span4">
                <div class="thumbnail">
                    <img data-src="holder.js/300x200" alt="300x200">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><button class="ui-button-primary">Primary</button><button>Default</button></p>
                    </div>
                </div>
            </li>
            <li class="span4">
                <div class="thumbnail">
                    <img data-src="holder.js/300x200" alt="300x200">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><button class="ui-button-primary">Primary</button><button>Default</button></p>
                    </div>
                </div>
            </li>
        </ul>
    </div>


    <h3>Hero unit with button</h3>
    <div class="hero-unit">
        <h1>Heading</h1>
        <p>Tagline</p>
        <p>
            <button class="ui-button-primary ui-btn-large">Learn more</button>
        </p>
    </div>

    <!-- Button set-->
    <h2>Button set</h2>
    <form>
        <p id="radioset">
            <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
            <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
            <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
        </p>
        <p id="format">
            <input type="checkbox" id="check1"><label for="check1">B</label>
            <input type="checkbox" id="check2"><label for="check2">I</label>
            <input type="checkbox" id="check3"><label for="check3">U</label>
        </p>
    </form>
<pre class="prettyprint linenums">
// Buttonset
$('#radioset').buttonset();
$("#format").buttonset();
</pre>


    <h2>Simple toolbar</h2>
    <form class="clearfix">
        <div id="toolbar" class="ui-toolbar ui-widget-header ui-corner-all">
            <button id="play">Play</button>
            <input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label>
            <span id="repeat">
                <input type="radio" id="repeat0" name="repeat" checked="checked"><label for="repeat0">No Repeat</label>
                <input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label>
                <input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label>
            </span>
        </div>
    </form>
<pre class="prettyprint linenums">
// Toolbar
$("#play").button({
    text: false,
    icons: {
        primary: "ui-icon-play"
    }
});
$("#shuffle").button();
$("#repeat").buttonset();
</pre>
    <h2>Split Button</h2>
    <div id="split-button" class="clearfix">
        <div>
            <button id="rerun">Run last action</button>
            <button id="select">Select an action</button>
        </div>
        <ul>
            <li><a href="#">Open...</a></li>
            <li><a href="#">Save</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
    </div>
<pre class="prettyprint linenums">
// Split Button
$( "#rerun" )
.button()
.click(function() {
    alert( "Running the last action" );
})
.next()
.button({
    text: false,
    icons: {
        primary: "ui-icon-triangle-1-s"
    }
})
.click(function() {
    var menu = $( this ).parent().next().show().position({
        my: "left top",
        at: "left bottom",
        of: this
    });
    $( document ).one( "click", function() {
        menu.hide();
    });
    return false;
}).parent()
.buttonset()
.next()
.hide()
.menu();
</pre>
</section>

